import React, {Component} from 'react';
import 'antd/dist/antd.css';
import store from './store/index'
import {getInputChangeAction,getAddItemAction,getDeleteItemAction,getTodoList } from './store/actionCreator'
import TodoListUI from './TodoListUI';

// UI组华负责渲染，容器组件负责处理逻辑
class TodoList2 extends Component { // 这是个容器组件


    componentDidMount() {
        const action = getTodoList(); // redux-thunk支持action返回函数
        store.dispatch(action)
        // console.log(action)
    }

    constructor(props) {
        super(props);
        this.state = store.getState();
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleStoreChange = this.handleStoreChange.bind(this)
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.handleItemDelete= this.handleItemDelete.bind(this)
        store.subscribe(this.handleStoreChange);
    }

    render() {
        return (
            <TodoListUI 
                inputValue={this.state.inputValue}
                handleInputChange={this.handleInputChange}
                handleBtnClick={this.handleBtnClick}
                handleItemDelete={this.handleItemDelete}
                list={this.state.list}
            />
        )
    }

    handleStoreChange() {
        this.setState(store.getState())
    }

    handleBtnClick() {
        // const action = {
        //     type: ADD_TOTO_ITEM
        // }
        const action = getAddItemAction();
        store.dispatch(action)
    }

    handleInputChange(e) {
        // action 
        // const action = {
        //     type: CHANGE_INPUT_VALUE,
        //     value: e.target.value
        // }
        const action = getInputChangeAction(e.target.value)
        store.dispatch(action);
    }

    handleItemDelete(index) {
        // const action = {
            // type: DELETE_TODO_ITEM,
            // index
        // }
        const action = getDeleteItemAction(index)
        store.dispatch(action);
    }
}

export default TodoList2